<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>选择音乐</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/admin.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layuimini-form">
            <div class="layui-form-item">
                <div class="layui-input-group">
                    <div class="layui-input-left">
                        <span class="layui-input-text">搜索歌曲</span>
                    </div>
                    <input type="text" name="keyword" id="keyword" placeholder="请输入歌曲名称或歌手进行搜索" autocomplete="off" class="layui-input">
                    <div class="layui-input-right">
                        <button class="layui-btn" id="btnSearch">搜索</button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="musicList" lay-filter="musicList"></table>
            </div>
        </div>
        
        <div class="layui-form-item layui-form-text" style="margin-top: 10px;">
            <div class="layui-input-block">
                <button class="layui-btn" id="btnAddSelected">添加选中的歌曲</button>
            </div>
        </div>
    </div>
</div>

<script src="../layui/layui.js" charset="utf-8"></script>
<script>
    // 获取URL参数
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURIComponent(r[2]);
        return null;
    }
    
    var targetType = getQueryString('type'); // 'playlist' 或 'album'
    var targetId = getQueryString('id'); // 歌单ID或专辑ID
    
    layui.use(['layer', 'form', 'table', 'laytpl'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laytpl = layui.laytpl;
        
        // 渲染音乐列表
        var musicTable = table.render({
            elem: '#musicList',
            url: '/music/list',
            page: true,
            limit: 10,
            limits: [10, 20, 30, 50],
            cols: [[
                {type: 'checkbox', width: 50},
                {field: 'id', title: 'ID', width: 80},
                {field: 'name', title: '歌曲名称', minWidth: 200},
                {field: 'singer', title: '歌手', width: 120},
                {field: 'album', title: '所属专辑', width: 150},
                {field: 'duration', title: '时长', width: 80, templet: function(d) {
                    //格式化时长
                    var minutes = Math.floor(d.duration / 60);
                    var seconds = d.duration % 60;
                    return minutes + ':' + (seconds < 10 ? '0' + seconds : seconds);
                }},
                {title: '操作', width: 80, templet: function(d) {
                    return '<a href="javascript:;" class="layui-btn layui-btn-sm" onclick="addSingleMusic(' + d.id + ')">添加</a>';
                }}
            ]]
        });
        
        // 搜索功能
        $('#btnSearch').click(function() {
            var keyword = $('#keyword').val();
            musicTable.reload({
                page: {curr: 1},
                where: {keyword: keyword}
            });
        });
        
        // 回车搜索
        $('#keyword').keyup(function(e) {
            if (e.keyCode === 13) {
                $('#btnSearch').click();
            }
        });
        
        // 添加选中的歌曲
        $('#btnAddSelected').click(function() {
            var checkStatus = table.checkStatus('musicList');
            var data = checkStatus.data;
            if (data.length === 0) {
                layer.msg('请至少选择一首歌曲', {icon: 2});
                return;
            }
            
            var musicIds = [];
            for (var i = 0; i < data.length; i++) {
                musicIds.push(data[i].id);
            }
            
            // 发送添加请求
            $.ajax({
                type: 'post',
                url: (targetType === 'playlist' || targetType === 'musiclist') ? '/musicList/addMusic' : '/music/updateAlbum',
                data: (targetType === 'playlist' || targetType === 'musiclist') ? 
                    {mlid: targetId, musicIds: musicIds} : 
                    {ids: musicIds, aid: targetId},
                traditional: true,
                success: function(resp) {
                    if (resp.code === 0) {
                        layer.msg('添加成功', {icon: 1});
                        
                        // 延迟关闭窗口
                        setTimeout(function() {
                            // 关闭当前弹窗
                            if (window.opener && window.opener.currentSelectMusicIndex) {
                                window.opener.layer.close(window.opener.currentSelectMusicIndex);
                                // 刷新父页面中的列表
                                if (window.opener.layui && window.opener.layui.table) {
                                    var tableId = targetType === 'playlist' ? 'musiclistDetails' : 'ablumDetails';
                                    if (window.opener.layui.table.render) {
                                        window.opener.layui.table.reload(tableId);
                                    }
                                }
                            }
                            // 关闭当前窗口
                            window.close();
                        }, 1500);
                    } else {
                        layer.msg(resp.msg || '添加失败', {icon: 2});
                    }
                },
                error: function() {
                    layer.msg('服务器错误', {icon: 2});
                }
            });
        });
    });
    
    // 单个添加歌曲
    function addSingleMusic(musicId) {
        // 发送添加请求
        $.ajax({
            type: 'post',
            url: (targetType === 'playlist' || targetType === 'musiclist') ? '/musicList/addMusic' : '/music/updateAlbum',
            data: (targetType === 'playlist' || targetType === 'musiclist') ? 
                {mlid: targetId, musicIds: [musicId]} : 
                {ids: [musicId], aid: targetId},
            traditional: true,
            success: function(resp) {
                if (resp.code === 0) {
                    layer.msg('添加成功', {icon: 1});
                } else {
                    layer.msg(resp.msg || '添加失败', {icon: 2});
                }
            },
            error: function() {
                layer.msg('服务器错误', {icon: 2});
            }
        });
    }
</script>
</body>
</html>